<template>
  <div>
    <el-card shadow="hover">
      {{condition}}
      <!--条件查询-->
      <el-form :inline="true" size="medium" :model="condition" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="condition.phone" placeholder="用户账号"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="condition.nickname" placeholder="用户昵称"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="condition.addr" placeholder="住址"></el-input>
        </el-form-item >
        <el-form-item>
          <el-button type="primary" plain @click="conditionSearch" icon="el-icon-user">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain @click="openAddUser" icon="el-icon-plus">添加用户</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" icon="el-icon-remove" plain @click="handleDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="userList"
          style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
            type="selection">
        </el-table-column>
        <el-table-column
            label="ID"
            prop="id"
            align="center"
            width="180">
        </el-table-column>
        <el-table-column
            label="用户账号"
            align="center"
            prop="phone">
        </el-table-column>
        <el-table-column
            label="用户昵称"
            align="center"
            prop="nickname">
        </el-table-column>
        <el-table-column
            label="性别"
            align="center"
            prop="sex">
        </el-table-column>
        <el-table-column
            label="住址"
            align="center"
            prop="addr">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页导航-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--对话框-->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      {{form}}
      <el-form :model="form" >
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="form.user.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth">
          <el-input v-model="form.user.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="form.user.sex" label="男">男</el-radio>
          <el-radio v-model="form.user.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="住址" :label-width="formLabelWidth">
          <el-input v-model="form.user.addr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="添加用户订单" :label-width="formLabelWidth">
          <el-select v-model="form.order.productId" placeholder="请选择产品">
            <el-option
                @click.native="handleSelectTeam(item)"
                v-for="item in productList"
                :key="item.id"
                :label="item.productName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="Visible" prop="productPrice" label="单价" :label-width="formLabelWidth">
          {{product.productPrice}}
        </el-form-item>
        <el-form-item  v-if="Visible"  prop="productCount" label="数量" :label-width="formLabelWidth">
          <el-input type="number" style="width: 80px" :value="1" :min="1"  v-model.number="form.order.productCount" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item v-if="Visible" prop="seckillPrice" label="总价" :label-width="formLabelWidth">
          {{totalPrice}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import user from "@/api/user";
import product from "@/api/product";
export default {
  computed: {
    totalPrice(){
      return this.form.order.productCount*this.product.productPrice
    }
  },
  data() {
    return {
      selected: [],
      condition: {
        phone:'',
        nickname:'',
        addr:'',
      },
      form:{
        user:{
          nickname:'',
          phone:'',
          sex:'',
          addr:'',
        },
        order:{
          productId:'',
          productCount:1,
          seckillPrice:'',
          productPrice:'',
          productName:'',
          phone:'',
        },
      },
      product:{},
      productList: [],
      userList: [],      // 当前页的所有用户信息集合
      page:1,               // 当前页
      pageSize:5,           // 每页大小
      total:0,            // 总记录数
      title: '添加用户',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      Visible:false,
    }
  },
  created() {
    this.conditionSearch()
    this.findProduct()
  },
  methods: {
    handleSelectTeam(item){
      this.Visible = true
      this.getProductById(item.id)
    },
    async getProductById(id) {
      const res = await product.findProductById(id)
      this.product = res.data.data
    },
    handleSelectionChange(rows){
      this.selected = []
      rows.forEach(row => {
        this.selected.push(row.id)
      })
      console.log(this.selected)
    },
    async findProduct() {
      const res = await product.findProduct()
      this.productList = res.data.data
    },

    async conditionSearch() {
      const res = await user.search(this.page, this.pageSize, this.condition)
      if (res.data.code === 200) {
        this.userList = res.data.data.list
        this.total = res.data.data.total
      }
      console.log(this.userList)
    },
    openAddUser(){
      this.title = '添加用户'
      this.dialogFormVisible = true
      this.Visible = false
      this.product={}
      this.form = {
        user:{},
        order:{},
      }
    },
    async addUser() {
      if(!this.form.user.id) {
        this.form.order.productPrice = this.product.productPrice
        this.form.order.seckillPrice = this.totalPrice
        this.form.order.productName = this.product.productName
        this.form.order.phone = this.form.user.phone
        console.log(this.form)
        const res = await user.save(this.form)
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.dialogFormVisible = false
          await this.conditionSearch()
        } else {
          this.$message.error(res.data.msg)
        }
      }else{
        const res = await user.update(this.form.user)
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.dialogFormVisible = false
          await this.conditionSearch()
        }else{
          this.$message.error(res.data.msg)
        }
      }

    },
    async getUserById(id) {
      const res = await user.findById(id)
      this.form = res.data.data
    },
    handleEdit(index, row) {
      console.log(row)
      this.dialogFormVisible = true
      this.form.user = row
      this.title = '修改用户'
      this.form.order = {}
      this.Visible = false
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除所选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if(row) {
          this.selected = []
          this.selected.push(row.id)
        }
        if(this.selected.length > 0){
          console.log(this.selected)
          const res = await user.deleteByIds(this.selected)
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            await this.conditionSearch()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        }
        else {
          this.$message({
            type: 'error',
            message: '请选择要删除的数据!'
          })
        }
        this.selected = []
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 每页大小改变时事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.conditionSearch()
    },
    // 当前页改变时事件
    handleCurrentChange(val) {
      this.page = val;
      this.conditionSearch()
    }
  }
}
</script>
<style>

</style>
